<template>
  <div>
        <common-head></common-head>
  <form action="/">
  <van-search
    v-model="keywords"
    show-action
    placeholder="请输入搜索关键词"
  @search='onSearch'
  @cancel="onCancel"
  />
  </form >
<div>
<van-cell-group :border="false" v-for="(item, index) in  dataSheets" :key="index">
<van-swipe-cell :before-close="beforeClose" :name="item.id" >
  <van-cell :border="true" :title="item.name" :value="'商品上架时间'+ item.ctime.split('T')[0]" />
  <template #right>
    <van-button square type="danger" text="删除"/>
  </template>
</van-swipe-cell>
</van-cell-group>
</div>
<div v-if="status !=0 ">
<div class='top'>
  <p>搜索历史</p>
  <i class="van-icon van-icon-delete" @click='alldel'></i>
</div>
<div>
   <van-divider v-show="keyWordNum" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}">暂无历史搜索</van-divider>
   <span v-show='!keyWordNum' class='tag_mark'  v-for="(item, index) in tagList" :key="index">
   <van-tag round    plain @click="overload" type="primary" size="medium">{{item}}</van-tag>
   </span>
</div>
</div>
<common-footer></common-footer>
</div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      // 请求的数据
      dataSheets: [],
      // 搜索框里面的值
      keywords: '',
      // 渲染出来的历史搜索
      tagList: [],
      // 请求的状态数据
      status: 1
    }
  },
  computed: {
    keyWordNum () {
      return this.tagList.length === 0
    },
    iskeyword () {
      // 这个计算属性的任务:拿数组的里面的值和输入框里面的值进行比较,有相同就返回true
      return this.tagList.some((t) => t === this.keywords.trim())
    }
  },
  mounted () {
    // 在页面一加载的时候,就获取历史数据,记得需要转换格式,因为直接取出来是字符串
    // 先判断localstorage里面有没有这个历史数据
    localStorage.historysearch &&
      (this.tagList = JSON.parse(localStorage.historysearch))
  },
  methods: {
    alldel () {
      this.tagList = []
      // 还需要删除localstorage中的数据
      localStorage.clear('historysearch')
    },
    async onSearch () {
      const val = this.keywords.trim()
      // 判断用户是否输入了值
      if (!val) {
        this.$toast('请输入内容')
        return (this.status = undefined && (this.dataSheets = []))
      }
      // 有内容就发送请求
      const { data: res } = await this.$http.get('/api/getprodlist')
      this.dataSheets = res.message
      this.status = res.status
      // console.log(this.dataSheets)
      // console.log(this.status)
      // this.tagList.push(this.keywords)
      if (!this.iskeyWord) {
        this.tagList.unshift(val)
        // 保存历史搜索数据到本地
        localStorage.historysearch = JSON.stringify(this.tagList)
      }
    },
    onCancel () {
      // eslint-disable-next-line no-unused-expressions
      this.dataSheets = []
      this.status = undefined
    },
    // 删除
    beforeClose ({ position, instance, name }) {
      console.log(name, 'name')
      // console.log(id, 'id')
      console.log(position, 'position')
      position === 'right' && this.$dialog.confirm({
        title: '警告',
        message: '确定删除吗？'
      }).then(async () => {
        console.log('11111')
        await this.$http.get('/api/delproduct/' + name)
        this.$notify({
          type: 'success',
          message: '删除成功'
        })
        // 获取最新的数据,重新给搜索结果列表赋值
        instance.close()
        return this.getSearchList()
      }).catch((error) => {
        console.log(error)

        this.$notify({
          type: 'success',
          message: '取消成功'
        })
      })
    },
    // 封装一个请求数据的方法
    async getSearchList () {
      const { data: res } = await this.$http.get('/api/getprodlist')
      this.dataSheets = res.message
    },
    overload (e) {
      this.keywords = e.target.textContent
    }
  }
}
</script>
<style lang="less" scoped>
.van-search {
  margin-top: 50px;
}
.top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
}
.tag_mark{
    margin-left: 20px;
}
</style>
